<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, ,user-scalable=no">
    <title>Document</title>
</head>
<style>
    *{margin:0;padding:0; user-select: none;}
    a{
        text-decoration: none;
        color:#000;
    }
    .header{
        width:100%;height:40px;
        line-height: 40px;
        background-color: #dfdfdf;
        display:flex;
        justify-content: space-between;
        padding:0 15px;
        box-sizing: border-box;
    }
    .header text{
        font-size:20px;
    }


    .r-box{padding-top:35px;text-align: center;}
    .r-box .avator{position:relative;}
    .r-box .avator input{
        /* opacity: 0; */
        width:130px;height:130px;border-radius:100px;
        border:1px solid red;
        position:absolute;opacity: 0;
    }
    .r-box .avator img{width:130px;height:130px;border-radius:100px;}
    .r-box p{}
    .r-box p input{height:40px;width:80%;border:1px solid #ccc;margin-top:15px;text-indent:30px;}
</style>
<body>
    <div class="header">
        <text><a href="./list.html">X</a></text>
        <text class="create-link"><b>新建联系人</b></text>
        <text onclick="addLinkman()">✔</text>
    </div>
    <div class="r-box">
        <div class="avator">
            <!-- 内容改变的时候出发 -->
            <input type="file" onchange="fileChange(this)"/>
            <img src="./imgs/1.jpg"/>
        </div>
        <p>
            <input type="text" class="uname" placeholder="输入名字">
        </p>
        <p>
            <input type="text" class="utel" placeholder="输入电话">
        </p>
    </div>

</body>
</html>
<script>

    localStorage.setItem("name","jack");

    let oUname = document.querySelector(".uname");
    let oUtel = document.querySelector(".utel");
    let oImg = document.querySelector(".avator img")
    let avator = '';
    
    let addLinkman = ()=>{
        //拿到输入框的内容
        let uname = oUname.value;
        let utel = oUtel.value;

        if(! uname){
            oUname.style.borderColor = "red";
            return;
        }
        //如果上面的校验通过，边框应该正常黑色
        oUname.style.borderColor = "#000";

        if(! utel){
            oUtel.style.borderColor = "red";
            return;
        }
        oUtel.style.borderColor = "#000";

        if(! avator){
            alert("请上传头像");
            return;
        }

        //如果校验通过，就要把数据添加到localStorage中的userList里面去
        //先的拿到原有的数据
        let data = localStorage.getItem("userList");
        data = JSON.parse(data);
        //装一个新的数据进去
        data.push(
            {name:uname,
                tel:utel,
                avator
                // avator:"./imgs/"+parseInt((Math.random()*6)+1)+".jpg"
            });
        //放回到localStorage里面去
        data = JSON.stringify(data);
        localStorage.setItem("userList",data);

        //回到列表页面
        location.href="./list.html";
        
    }


    let fileChange = (t)=>{
        console.log("hello wrold");
        //能不能在这里得到图片呢
        let file = t.files[0];//选中的那张图片信息
        let fileReader = new FileReader();
        fileReader.readAsDataURL(file);
        fileReader.onload = ()=>{
            // console.log("-->",fileReader.result);
            avator = fileReader.result;
            oImg.src = avator;
        }
    }
</script>